<template>
	<view class="progress">
		<view class="back">
			<image class="back-img" @click="back" src="../../../static/index/fanhui.png" mode=""></image>
			<text class="back-name">项目进展</text>
		</view>
		<view class="content">
			<view class="details">
				<image class="details-left" src="../../../static/publicwelfare/environmentBg.png" mode=""></image>
				<view class="details-right">
					<view style="font-size: 32rpx;color: #333333;">河南灾后重建校园</view>
					<view style="font-size: 28rpx;color: #999999;">发起和善款接收机构：</view>
					<view style="font-size: 28rpx;color: #999999;">河南省慈善总会<image style="width: 12rpx;height: 23rpx;margin-left: 20rpx;" src="../../../static/mine/rightjiantou.png" mode=""></image></view>
					<view style="font-size: 28rpx;color: #FF7200" @click="checkEdit">查看详情</view>
				</view>
			</view>
			<view class="pro">
				<view class="pro-title">
					执行进展
				</view>
				<view class="pro-content">
					<view class="pro-content-box" v-for="(item,index) in proList" @click="proEdit(item)">
						<view class="pro-content-title">
							{{item.title}}
						</view>
						<view class="pro-content-time">
							<text>2021-10-14  11:38</text>
							<text>日常进展</text>
						</view>
						<view class="pro-content-text">
							<text>根据项目组现场调研及当地教育主管部门、学校的申报情况，新乡市第一批援助的5所学校1000套课桌椅已于十月上旬进行援助</text>
							<text>详情</text>
						</view>
						<image style="width: 100%;height: 244rpx;border-radius: 20rpx;margin-top: 10rpx;" src="../../../static/publicwelfare/smallenBg.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			去捐赠
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				proList:[{title:'河南新乡市5所学校物资已发出'},{title:'河南新乡市5所学校物资已发出'}]
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			//查看详情
			checkEdit(){
				uni.navigateTo({
					url:'/myPackageA/index/environment/environmentEdit'
				})
			},
			//项目详情
			proEdit(){
				uni.navigateTo({
					url:'/myPackageA/index/environment/executePro'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.progress{
		.btn{
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #ffffff;
			font-size: 32rpx;
			background-color: #FF7200;
			opacity: 1;
			border-radius: 0px;
		}
		.content{
			padding: 0 40rpx;
			.pro{
				width: 100%;
				height: auto;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 20rpx;
				margin-bottom: 60rpx;
				.pro-content{
					padding: 34rpx;
					.pro-content-box{
						margin-bottom: 40rpx;
						padding-bottom: 44rpx;
						border-bottom: 2rpx solid #F2F2F2;
						display: flex;
						flex-direction: column;
						.pro-content-title{
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #333333;
						}
						.pro-content-time{
							text:first-child{
								font-size: 24rpx;
								font-family: Source Han Sans CN;
								color: #999999;
							}
							text:last-child{
								padding: 5rpx;
								width: 88rpx;
								height: 24rpx;
								line-height: 24rpx;
								font-size: 16rpx;
								text-align: center;
								color: #FF3838;
								background: #FF9595;
								opacity: 1;
								border-radius: 100rpx;
								margin-left: 10rpx;
							}
						}
						.pro-content-text{
							text:first-child{
								font-size: 28rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								line-height: 48rpx;
								color: #999999;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 3;
								overflow: hidden;
							}
							text:last-child{
								font-size: 28rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								line-height: 48rpx;
								color: #FF7200;
							}
						}
					}
				}
				.pro-title{
					height: 88rpx;
					line-height: 88rpx;
					padding-left: 32rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF7200;
					border-bottom: 2rpx solid #F2F2F2;
				}
			}
			.details{
				width: 100%;
				height: 248rpx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				padding: 22rpx 108rpx 22rpx 34rpx;
				margin-bottom: 40rpx;
				.details-left{
					width: 212rpx;
					height: 206rpx;
					border-radius: 20rpx;
				}
				.details-right{
					line-height: 50rpx;
				}
			}
		}
	}
	
.back {
		padding-top: 90rpx;
		width: 100%;
		height: 176rpx;
		background-color: #24AE3E;
		display: flex;
		align-self: center;
		padding-left: 0 !important;
		padding-right: 0 !important;

		.back-img {
			width: 40rpx;
			height: 40rpx;
			margin-top: 10rpx;
			margin-left: 40rpx;
		}

		.back-name {
			font-size: 18px;
			line-height: 31px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			margin-right: 18rpx;
		}
	}
</style>
